<template>
    <div style="position:relative;height:100%;background:#eeeeee;">
        <div class="treeBox">
            <el-form ref="form" :model="formSearch" label-width="50px">
                <el-form-item label="区域">
                    <el-select v-model="formSearch.xqId" placeholder="请选择区域" size="mini" @change="getSection">
                        <el-option v-for="item in xqSelect" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼栋">
                    <el-select v-model="buildId" placeholder="请选择区域" size="mini" @change="getCameraDevInfo">
                        <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- <el-tree :data="sectionTree" :props="defaultProps" :accordion="true" node-key="id" show-checkbox
                ref="sectionTree" @check-change="checkChangeClick">
            </el-tree> -->
            <div class="channelTree">
                <el-tree :data="cameraList" :props="channelProps" :accordion="true" node-key="id" ref="channelTree"
                    @node-click="getCameraPlay">
                </el-tree>
            </div>
        </div>
        <div class="video_layout" id="video_layout">
            <div>
                <template v-for="(item,index) in videoList">
                    <div :key="item.id" class="itemBox">
                        <video :id="'my_video_'+index" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid"
                            data-setup="{}" controls muted autoplay="true" preload="../assets/images/play.png">
                            <source :src="item.src" type="application/x-mpegURL" />
                        </video>
                        <div class="devicePosition" suffix-icon="el-icon-close">
                            <span class="el-icon-close closeVideo" @click="removeVideo(index)"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import videojs from 'video.js';
import {
    sectionTree,
    xqSelectList,
    getCameraList,
    getCameraDevInfo,
    getFloorImg

} from '../../url/api';
export default {
    data() {
        return {
            //楼栋监控列表
            cameraList: [],
            buildList: [], //楼栋列表 - 监控
            deviceCode: '', //设备号
            buildId: '',
            formSearch: { xqId: '' },
            //播放列表
            videoList: [
                /* {
                    id: 1,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                },
                {
                    id: 2,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                },
                {
                    id: 3,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                },
                {
                    id: 4,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                },
                {
                    id: 5,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                    autoplay: true,
                },
                {
                    id: 6,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                },
                {
                    id: 7,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                },
                {
                    id: 8,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                },
                {
                    id: 9,
                    src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                    type: 'application/x-mpegURL',
                }, */
            ],
            sectionTree: [],
            sectionId: '',
            xqSelect: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id',
            },
            channelProps: {
                children: 'children',
                label: 'channelName',
                value: 'id',
            },
        };
    },
    methods: {
        getCameraPlay(data, node, component) {
            // http://10.201.2.8:7086/live/cameraid/设备号%24+通道号/substream/1.m3u8
            let { channelSeq, channelName } = data;
            let url = `http://10.201.2.8:7086/live/cameraid/${this.deviceCode}%24${channelSeq}/substream/1.m3u8`;
            // let url = `https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8`;
            let arr = JSON.parse(JSON.stringify(this.videoList));
            console.log(url);
            this.videoList.push({
                id: (Math.random() * 1000000).toFixed(0),
                type: 'application/x-mpegURL',
                src: url,
                name: channelName,
            });
            this.myPlay();
        },
        removeVideo(index) {
            // if (this.videoList.length <= 9) return;
            this.videoList.splice(index, 1);
            videojs('my_video_' + index).posed();
        },
        init() {
            xqSelectList({})
                .then((res) => {
                    if (res.data.code) {
                        this.xqSelect = res.data.data;
                        let id = this.xqSelect[0].id;
                        this.formSearch.xqId = id;
                        return sectionTree([id]);
                    }
                })
                .then((res) => {
                    if (res.data.ok) {
                        this.sectionTree = res.data.data;
                        this.sectionId = this.sectionTree[0].id;
                    }
                });
            this.getBuildList();
        },
        //根据小区获取区域
        getSection(id) {
            sectionTree([id]).then((res) => {
                if (res.data.ok) {
                    this.sectionTree = res.data.data;
                }
            });
        },
        //设置树为单选
        checkChangeClick(data, checked, node) {
            if (checked) {
                // console.log(this.$refs.sectionTree.getHalfCheckedNodes());//半选中的node
                this.sectionId = data.id;
                this.saveParams.sectionId = data.id;
                this.saveParams.xqId = this.formSearch.xqId;
                this.$emit('getData', this.saveParams);
                this.checkedSectionList =
                    this.$refs.sectionTree.getHalfCheckedNodes();
                this.checkedSectionList.push(data);
                this.$refs.sectionTree.setCheckedKeys([data.id]);
                // let dom = document.getElementById('cadImg');
                getFloorImg({
                    id: data.id,
                    xqId: this.formSearch.xqId,
                    state: 0,

                }).then((res) => {
                    if (res.data.ok) {
                        let data = res.data.data;
                        if (data) {
                            this.bindPoint.url = data.baseMap;
                            this.$set(this.bindPoint, 'url', data.baseMap);
                            this.uploadFlag = false;
                            this.getPointList();
                        } else {
                            this.$set(this.bindPoint, 'url', '');
                            this.uploadFlag = true;
                        }
                        console.log(
                            this.uploadFlag,
                            this.viewType,
                            this.$route.path
                        );
                        this.$forceUpdate();
                    }
                });
            } else {
                if (this.checkedId == data.id) {
                    this.$refs.sectionTree.setCheckedKeys([data.id]);
                }
            }
        },
        myPlay() {
            setTimeout(() => {
                this.$nextTick(() => {
                    for (var i = 0; i < this.videoList.length; i++) {
                        let dom = document.getElementById('my_video_' + i);
                        console.log(dom);
                        videojs(dom, { autoplay: true }, function () {
                            this.play();
                        });
                    }
                });
            }, 1000);
        },
        getBuildList() {
            getCameraList({ current: 1, size: 999 }).then((res) => {
                if (res.data.ok) {
                    this.buildList = res.data.data;
                    this.buildId = this.buildList[0].id;
                    this.getCameraDevInfo(this.buildId);
                }
            });
        },
        getCameraDevInfo(id) {
            this.deviceCode = id;
            getCameraDevInfo(id).then((res) => {
                if (res.data.ok) {
                    let data = res.data.data;
                    this.cameraList = data.units[0].channels;
                }
            });
        },
    },
    mounted() {
        this.init();
        this.myPlay();
    },
    beforeDestroy() {
        for (var i = 0; i < this.videoList.length; i++) {
            videojs('my_video_' + i).posed();
        }
    },
};
</script>

<style lang='scss' scoped>
.treeBox {
    width: 200px;
    position: absolute;
    top: 0px;
    bottom: 0;
    background: #fff;
    .channelTree {
        width: 100%;
        position: absolute;
        top: 120px;
        bottom: 0px;
        overflow-y: scroll;
    }
    .channelTree::-webkit-scrollbar {
        width: 0;
        display: none;
    }
}
.video_layout::-webkit-scrollbar {
    width: 0;
    display: none;
}

.video_layout {
    background: #fff;
    // width: 100%;
    position: absolute;
    left: 210px;
    top: 0px;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    // display: inline-block;
    // display: flex;
    // flex-flow: wrap;
    // justify-content: space-around;
    & > div {
        display: inline-block;
        // width: ;
        $multiple : 29;
        $videoItemW: 16 * $multiple;
        $videoItemH: 9 * $multiple;
        & > .itemBox {
            display: inline-block;
            // width: 576px;
            // height: 323px;
            width: $videoItemW + px;
            height:  $videoItemH + px;
            // margin: 10px 30px;
            // margin: 0 6px;
            background: #000;
            text-align: center;
            line-height: 20;
            position: relative;
            left: 0;
            top: 0;
            video {
                width: 100%;
                height: 100%;
            }
            .devicePosition {
                z-index: 990;
                position: absolute;
                top: 6px;
                left: 0;
                color: #979797;
                opacity: 0.6;
                display: inline-block;
                width: $videoItemW + px;
                font-size: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                .closeVideo {
                    display: inline-block;
                    font-size: 30px;
                    position: absolute;
                    right: 10px;
                }
            }
        }
    }
}
</style>
